<template>
  <div>
    <el-row>
      <el-header class="main-part" style="text-align: right; font-size: 20px">
        <h1>新闻列表</h1>
        <el-button
          type="primary"
          plain
          @click="$router.push({ name: 'Create' })"
          >新建</el-button
        >
      </el-header>
      <el-table
        stripe
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
      >
        <el-table-column prop="id" label="序号" width="50"> </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="type" label="类型" width="60"> </el-table-column>
        <el-table-column prop="author" label="发布者"> </el-table-column>
        <el-table-column label="封面图" width="200">
          <template slot-scope="scope">
            <img :src="scope.row.poster" alt="" width="80" />
          </template>
        </el-table-column>
        <el-table-column prop="view_count" label="浏览次数" width="80">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-view"
              type="info"
              circle
              @click="handleDetail(scope.row)"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteNews(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Admin",
  data() {
    return {
      props: {
        id: "",
        title: "",
        type: "",
        author: "",
        poster: "",
        view_count: "",
      },
      tableData: [],
      loading: false,
    };
  },
  created() {
    this.loading = true;
    this.getData();
  },
  methods: {
    handleDetail(row) {
      this.$router.push({
        name: "Detail",
        params: {
          article_id: row.id,
        },
      });
    },
    handleEdit(row) {
      this.$router.push({
        name: "Modify",
        params: {
          article_id: row.id,
        },
      });
    },
    deleteNews(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fetch(`http://120.27.209.174:1010/api/v1/posts/${row.id}`, {
            method: "DELETE",
          })
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
              this.getData();
            })
            .catch((err) => {
              console.log(err);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getData() {
      axios
        .get("http://120.27.209.174:1010/api/v1/posts?type=&size=10&page=1")
        .then((resp) => {
          this.tableData = resp.data.data;
          this.tableData.find((item) => {
            fetch("http://120.27.209.174:1010/api/v1/posts_type")
              .then((res) => res.json())
              .then((res) => {
                for (let i = 0; i < res.length; i++) {
                  if (res[i].type === item.type) {
                    item.type = res[i].text;
                  }
                }
              })
              .finally(() => {
                this.loading = false;
              });
          });
        });
    },
  },
};
</script>

<style lang="less">
.el-header.main-part {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-header button {
  height: 40px;
  font-size: 15px;
}
.cell {
  text-align: center !important;
}
</style>
